<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<title>1169移动端可视化定制分析</title>
	<link rel="stylesheet" href="assets/iconfont/iconfont.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="assets/js/jquery-3.3.1.min.js"></script>
	<script src="js/common.js"></script>
	<style>
	</style>

</head>

<body>
	<div id="container">
		<header class="mainHeader">
			<h1>1169移动端可视化定制分析</h1>
			<div class="inputGroup">
				<label for="date"></label>
				<input id="date" type="date">
			</div>
			<nav class="mainNav">
				<ul>
					<li class="active">
						<a href="index.html">
							<i class="iconfont icon-index"></i>
							<div class="text">首页</div>
						</a>
					</li>
					<li>
						<a href="pages/goods01_all.html">
							<i class="iconfont icon-shangpin"></i>
							<div class="text">商品</div>
						</a>
					</li>
					<li class="unDev">
						<a href="#">
							<i class="iconfont icon-yonghu"></i>
							<div class="text">用户</div>
						</a>
					</li>
					<li class="unDev">
						<a href="#">
							<i class="iconfont icon-caidan"></i>
							<div class="text">平台</div>
						</a>
					</li>

				</ul>
			</nav>
		</header>
		<main>
			<div class="l">
				<h3>用户运营</h3>
				<div class="box">
					<div class="item">
						<table class="yellowTxt" id="text">
							<thead>
								<tr>
									<th></th>
									<th>累计用户数
										<br>
										<span class="unit">(人)</span>
									</th>
									<th>日新增用户数
										<br>
										<span class="unit">(人)</span>
									</th>
									<th>活跃用户数
										<br>
										<span class="unit">(人)</span>
									</th>
									<th>活跃率
										<br>
										<span class="unit">&nbsp;</span>
									</th>
								</tr>
							</thead>
							<tbody>
								
								
								
							</tbody>
						</table>
					</div>
					<div class="item">
						<h4>新增用户数趋势</h4>
						<div class="chartBox" id="ec001_line"></div>
					</div>
					<div class="item">
						<h4>活跃用户数和活跃率趋势图</h4>
						<div class="chartBox" id="ec002_lineBar"></div>
					</div>
					<div class="item">
						<h4>留存率和回流率趋势图</h4>
						<div class="chartBox" id="ec003_lineBar"></div>
					</div>
				</div>
			</div>
			<div class="m">
				<h3>商品运营</h3>
				<div class="box">
					<div class="item">
						<table class="yellowTxt" id="text2">
							<thead>
								<tr>
									<th></th>
									<th>订单量
										<br>
										<span class="unit">(人)</span>
									</th>
									<th>交易额
										<br>
										<span class="unit">(万元)</span>
									</th>
									<th>平均订单额
										<br>
										<span class="unit">(元)</span>
									</th>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
						</table>
					</div>
					<div class="item">
						<h4>订单量</h4>
						<div class="chartBox" id="ec004_line"></div>
					</div>
					<div class="item">
						<h4>订单转化</h4>
						<div class="chartBox" id="ec005_scatter"></div>
					</div>
				</div>
			</div>
			<div class="r">
				<h3>平台运营</h3>
				<div class="box">
					<div class="item">
						<table class="yellowTxt">
							<thead>
								<tr>
									<th></th>
									<th>人均访问次数
										<br>
										<span class="unit">(次)</span>
									</th>
									<th>人均访问时长
										<br>
										<span class="unit">(s)</span>
									</th>
									<th>人均访问页面数
										<br>
										<span class="unit">(页)</span>
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>乐家</td>
									<td>0
										<!--<i class="iconfont icon-increase"></i>-->
									</td>
									<td>0
									<!--	<i class="iconfont icon-slide"></i>-->
									</td>
									<td>0
										<!--<i class="iconfont icon-slide"></i>-->
									</td>
								</tr>
								<tr>
									<td>乐农</td>
									<td id="top1_1">0
									<!--	<i class="iconfont icon-increase"></i>-->
									</td>
									<td id="top1_2">0
										<!--<i class="iconfont icon-slide"></i>-->
									</td>
									<td id="top1_3">0
										<!--<i class="iconfont icon-increase"></i>-->
									</td>
								</tr>
								<tr>
									<td>车小微</td>
									<td>0
									<!--	<i class="iconfont icon-increase"></i>-->
									</td>
									<td>0
										<!--<i class="iconfont icon-increase"></i>-->
									</td>
									<td>0
										<!--<i class="iconfont icon-slide"></i>-->
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="item">
						<h4>人均访问次数</h4>
						<div class="chartBox" id="ec006_hBar"></div>
					</div>
					<div class="item">
						<h4>人均访问时长</h4>
						<div class="chartBox" id="ec007_hBar"></div>
					</div>
					<div class="item">
						<h4>人均访问页面</h4>
						<div class="chartBox" id="ec008_hBar"></div>
					</div>
				</div>
			</div>
		</main>
	</div>

	<script src="assets/js/echarts-4.1.0.rc2.min.js"></script>

	<script src="js/chartsCom.js"></script>
	<script src="js/index.js"></script>

	<script>
		
		$(function () {
            //显示当前时间
            var now = new Date();
            //格式化日，如果小于9，前面补0
            var day = ("0" + now.getDate()).slice(-2);
            //格式化月，如果小于9，前面补0
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            //拼装完整日期格式
            var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
            //完成赋值
            $('#date').val(today);
           // alert($('#date').val())
			$(".mainNav>ul>li:not(.unDev)").click(function () {
				$(this).addClass("active").siblings().removeClass("active");
			});

			// 活跃用户数和活跃率趋势图
			
			// 留存率和回流率趋势图
			let ec003_lineBar = echarts.init($("#ec003_lineBar")[0]);
			ec003_lineBar.setOption(opt_line);
			ec003_lineBar.setOption(opt_bar_vertical);
			ec003_lineBar.setOption({
				grid: {
					top: '29%',
					bottom: '20%',
					left: '15%',
					right: '4%',
				},
                tooltip: {
                    position: 'top',
                    formatter: function (params) {
                        console.log(params);
                        var arr=[];
                        $.each(params,function(index,item){
                            if(index>params.length/2-1){
                                arr.push(params[index].seriesName+":"+params[index].data+"%</br>");
                            }else{
                                arr.push(params[index].seriesName+":"+params[index].data+"</br>");
                            }

                        });
                        return arr.join('');

                    }
                },
				xAxis: {
					// name: '月份',
					data: [ 201802, 201803, 201804, 201805, 201806,201807]
				},
				yAxis: {
                    axisLabel: {
                        formatter: '{value} %'
                    },
					min:0,
					max:100
				},
				series: [
					{
						name: '乐家',
						type: 'line',
						symbol: 'circle',
						smooth: true,
						lineStyle: lineStyle,
						data: [0, 0, 0, 0, 0, 0],
					},
					{
						name: '乐农',
						type: 'line',
						symbol: 'circle',
						smooth: true,
						lineStyle: lineStyle,
						data: [0, 0, 0, 0, 0, 0],
					},
					{
						name: '车小微',
						type: 'line',
						symbol: 'circle',
						smooth: true,
						lineStyle: lineStyle,
						data: [0, 0, 0, 0, 0, 0],
					},
					{
						name: '乐家 ',
						type: 'bar',
						itemStyle: { color: colors[0] },
						barWidth: '20%',
						data: [0, 0, 0, 0, 0, 0],
					},
					{
						name: '乐农 ',
						type: 'bar',
						itemStyle: { color: colors[1] },
						barWidth: '20%',
						data: [0, 0, 0, 0, 0, 0],
					},
					{
						name: '车小微 ',
						type: 'bar',
						itemStyle: { color: colors[2] },
						barWidth: '20%',
						data: [0, 0, 0, 0, 0, 0],
					}
				]
			});

			// 订单用户数
			

			// 订单用户转化率
		



		})
		var json = [];
		var time;
		var cbkCode;

		//刷新数据
		function loadAllData() {
			getChartData();
		}

		function getChartData() {
			$.ajax({
				url: '',
				data: { time: time, cbkCode: code },
				type: 'GET',
				dataType: 'json',
				error: function () {
					setDataToChart(json)
				},
				success: function (data) {
					setDataToChart(data);
				}
			});
		}

		function setDataToChart(data) {

		}
	</script>
</body>

</html>